Membuat Widget Link Bercahaya.

Kotak / box pada widget yang akan dibuat nantinya akan terlihat gelap jika hanya dilihat dan kotak menu pada widget akan terlihat terang ketika mouse anda diarahkan atau didekatkan. Sengaja saya tidak berikan demonya karena cara membuatnya cukup mudah dan pasti berhasil seperti yang anda lihat pada gambar dibawah ini. Nantinya setelah anda memasang kode-kode dengan benar, maka kotak widget tersebut bisa berubah redup / gelap dan terang apabila widget disorot mouse.

Cara Membuat Widget Dengan Efek Hover Menjadi Gelap Terang :
1. Login ke blogger
2. Pilih Template => Edit HTML
3. Centang Expand Widget Template
4. Tekan F3 dan cari kode ]]></b:skin> lalu letakkan kode berikut diatasnya

.rudy-box {position:relative;display:block;width:250px;overflow:auto;max-height:350px; top left;color:#00C8FF; overflow:auto;padding:5px 5px;margin:5px 5px;border:2px solid #F9A600;border-radius:6px;opacity:0.2;filter:alpha(opacity=20);  transition:4s;-o-transition:4s; -moz-transition:4s; -webkit-transition:4s; }.rudy-box:hover {opacity:1.0;filter:alpha(opacity=100);border:1px solid #3B240B; -webkit-box-shadow: 1px 1px 10px 5px #FFEE00; -moz-box-shadow: 1px 1px 10px 5px #FFEE00;box-shadow: 1px 1px 10px 5px #FFEE00; }

Keterangan :
Warna merah merupakan panjang dan lebar kotak / box widget

5. Selesai dan save template

6. Selanjutnya pilih Tata Letak => Tambah Gadget => HTML/Javascript dan masukkan kode berikut kedalamnya

<div class="rudy-box">
<style>
.list {
background:none; no-repeat left center;
border-bottom:1px dotted #ccc;
line-height:1.2em;
padding:2px 2px 2px 20px;
}
</style>
<div style="overflow:auto; padding:2px; margin:1px 1px 1px 1px; width:auto; height:auto; background:-webkit-gradient(linear, left top, left bottom, from(#ccc), to(#ffffff)); border:1px solid #ccc;-moz-border-radius: 10px 10px 10px 10px; -webkit-border-radius: 10px 10px 10px 10px;">
<ul><table width="100%" border="0">
<tr>
<td><li><a href="#">Home</a></li></td>
</tr>
<tr>
<td><li><a href="#">About Me</a></li></td>
</tr>
<tr>
<td><li><a href="#">Contact Us</a></li></td>
</tr>
<tr>
<td><li><a href="#">Sitemap</a></li></td>
</tr>
<tr>
<td><li><a href="#">Blogging</a></li></td>
</tr>
<tr>
<td><li><a href="#">Info Bola</a></li></td>
</tr>
<tr>
<td><li><a href="#">Kuliner</a></li></td>
</tr>
<tr>
<td><li><a href="#">Pendidikan</a></li></td>
</tr>
<tr>
<td><li><a href="#">Lifestyle</a></li></td>
</tr>
<tr>
<td><li><a href="#">Berita</a></li></td>
</tr>
<tr>
<td><li><a href="#">Gosip Selebritis</a></li></td>
</tr>
<tr>
<td><li><a href="#">Login</a></li></td>
</tr>
<tr>
<td><li><a href="#">Pasang Iklan</a></li></td>
</tr>
</table>
</ul>
</div></div>

Keterangan :
Ganti warna biru dengan url dan judul
Sekian semoga bermanfaat..:)

Artikel Terkait